<!DOCTYPE html>
<html>
<head>
    <title>Ceadeal 后台管理系统</title>
    <#include "../common/head.ftl"/>
    <link rel="stylesheet" type="text/css" href="/plugin/fancybox2/source/jquery.fancybox.css?v=2.1.5" media="screen" />
    <link rel="stylesheet" type="text/css" href="/plugin/fancybox2/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    <link rel="stylesheet" type="text/css" href="/plugin/fancybox2/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
</head>
<body class="cw-body">
<div id="page-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            测试
            <small>fancybox2</small>
        </h1>
        <ol class="breadcrumb">
            <li class="active"><a href="/main"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li class="active">测试</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Your Page Content Here -->
        <h4>简单的图像画廊</h4>
        <p>
            <a class="fancybox" href="/plugin/fancybox2/demo/1_b.jpg" data-fancybox-group="gallery" title="图片1"><img src="/plugin/fancybox2/demo/1_s.jpg" alt="" /></a>

            <a class="fancybox" href="/plugin/fancybox2/demo/2_b.jpg" data-fancybox-group="gallery" title="图片2"><img src="/plugin/fancybox2/demo/2_s.jpg" alt="" /></a>

            <a class="fancybox" href="/plugin/fancybox2/demo/3_b.jpg" data-fancybox-group="gallery" title="图片3"><img src="/plugin/fancybox2/demo/3_s.jpg" alt="" /></a>

            <a class="fancybox" href="/plugin/fancybox2/demo/4_b.jpg" data-fancybox-group="gallery" title="图片4"><img src="/plugin/fancybox2/demo/4_s.jpg" alt="" /></a>
        </p>

        <h4>不同的效果</h4>
        <p>
            <a class="fancybox-effects-a" href="/plugin/fancybox2/demo/5_b.jpg" title="图片1"><img src="/plugin/fancybox2/demo/5_s.jpg" alt="" /></a>

            <a class="fancybox-effects-b" href="/plugin/fancybox2/demo/5_b.jpg" title="图片2"><img src="/plugin/fancybox2/demo/5_s.jpg" alt="" /></a>

            <a class="fancybox-effects-c" href="/plugin/fancybox2/demo/5_b.jpg" title="图片3"><img src="/plugin/fancybox2/demo/5_s.jpg" alt="" /></a>

            <a class="fancybox-effects-d" href="/plugin/fancybox2/demo/5_b.jpg" title="图片4"><img src="/plugin/fancybox2/demo/5_s.jpg" alt="" /></a>
        </p>

        <h4>各种类型</h4>
        <p>
            funcybox将试图想从href属性内容类型,但您可以指定它直接通过添加名称(fancybox.image, fancybox.iframe, 等等)。
        </p>
        <ul>
            <li><a class="fancybox" href="#inline1" title="标题">Inline</a></li>
            <li><a class="fancybox fancybox.ajax" href="/plugin/fancybox2/demo/ajax.txt">Ajax</a></li>
            <li><a class="fancybox fancybox.iframe" href="/plugin/fancybox2/demo/iframe.html">Iframe</a></li>
            <li><a class="fancybox" href="/flash/keyboard-piano.swf">Swf</a></li>
        </ul>

        <div id="inline1" style="width:400px;display: none;">
            <h3>望庐山瀑布</h3>
            <p>日照香炉生紫烟，遥看瀑布挂前川。<br />飞流直下三千尺，疑是银河落九天。</p>
        </div>

        <p>
            Ajax例子不会从您的本地计算机上运行,需要一个服务器运行。
        </p>

        <h4>按钮的助手</h4>
        <p>
            <a class="fancybox-buttons" data-fancybox-group="button" href="/plugin/fancybox2/demo/1_b.jpg"><img src="/plugin/fancybox2/demo/1_s.jpg" alt="" /></a>

            <a class="fancybox-buttons" data-fancybox-group="button" href="/plugin/fancybox2/demo/2_b.jpg"><img src="/plugin/fancybox2/demo/2_s.jpg" alt="" /></a>

            <a class="fancybox-buttons" data-fancybox-group="button" href="/plugin/fancybox2/demo/3_b.jpg"><img src="/plugin/fancybox2/demo/3_s.jpg" alt="" /></a>

            <a class="fancybox-buttons" data-fancybox-group="button" href="/plugin/fancybox2/demo/4_b.jpg"><img src="/plugin/fancybox2/demo/4_s.jpg" alt="" /></a>
        </p>

        <h4>缩略图助手</h4>
        <p>
            <a class="fancybox-thumbs" data-fancybox-group="thumb" href="/plugin/fancybox2/demo/4_b.jpg"><img src="/plugin/fancybox2/demo/4_s.jpg" alt="" /></a>

            <a class="fancybox-thumbs" data-fancybox-group="thumb" href="/plugin/fancybox2/demo/3_b.jpg"><img src="/plugin/fancybox2/demo/3_s.jpg" alt="" /></a>

            <a class="fancybox-thumbs" data-fancybox-group="thumb" href="/plugin/fancybox2/demo/2_b.jpg"><img src="/plugin/fancybox2/demo/2_s.jpg" alt="" /></a>

            <a class="fancybox-thumbs" data-fancybox-group="thumb" href="/plugin/fancybox2/demo/1_b.jpg"><img src="/plugin/fancybox2/demo/1_s.jpg" alt="" /></a>
        </p>

        <h4>媒体辅助</h4>
        <p>
            不会从您的本地计算机上运行,需要一个服务器运行。
        </p>

        <ul>
            <li><a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Youtube</a></li>
            <li><a class="fancybox-media" href="http://vimeo.com/47480346">Vimeo</a></li>
            <li><a class="fancybox-media" href="http://www.metacafe.com/watch/7635964/">Metacafe</a></li>
            <li><a class="fancybox-media" href="http://www.dailymotion.com/video/xoeylt_electric-guest-this-head-i-hold_music">Dailymotion</a></li>
            <li><a class="fancybox-media" href="http://twitvid.com/QY7MD">Twitvid</a></li>
            <li><a class="fancybox-media" href="http://twitpic.com/7p93st">Twitpic</a></li>
            <li><a class="fancybox-media" href="http://instagr.am/p/IejkuUGxQn">Instagram</a></li>
        </ul>

        <h4>手动打开</h4>
        <ul>
            <li><a id="fancybox-manual-a" href="javascript:;">打开单个项目</a></li>
            <li><a id="fancybox-manual-b" href="javascript:;">打开单个项目, 定制选项</a></li>
            <li><a id="fancybox-manual-c" href="javascript:;">打开画廊</a></li>
        </ul>

    </section>
    <!-- /.content -->
</div>

<!-- REQUIRED JS SCRIPTS -->
<#include "../common/script-common.ftl"/>
<script type="text/javascript" src="/plugin/fancybox2/lib/jquery.mousewheel.pack.js?v=3.1.3"></script>
<script type="text/javascript" src="/plugin/fancybox2/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="/plugin/fancybox2/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/plugin/fancybox2/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="/plugin/fancybox2/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script>
    $(function() {
        /*
         *  简单的图片画廊。使用默认设置
         */

        $('.fancybox').fancybox();

        /*
         *  不同的效果
         */

        // 更改标题类型,覆盖关闭速度
        $(".fancybox-effects-a").fancybox({
            helpers: {
                title : {
                    type : 'outside'
                },
                overlay : {
                    speedOut : 0
                }
            }
        });

        // 禁用打开和关闭动画,改变标题类型
        $(".fancybox-effects-b").fancybox({
            openEffect  : 'none',
            closeEffect	: 'none',

            helpers : {
                title : {
                    type : 'over'
                }
            }
        });

        // 设置自定义样式,如果点击,改变标题类型和颜色叠加
        $(".fancybox-effects-c").fancybox({
            wrapCSS    : 'fancybox-custom',
            closeClick : true,

            openEffect : 'none',

            helpers : {
                title : {
                    type : 'inside'
                },
                overlay : {
                    css : {
                        'background' : 'rgba(238,238,238,0.85)'
                    }
                }
            }
        });

        // 删除填充,设置打开和关闭动画,如果点击禁用叠加
        $(".fancybox-effects-d").fancybox({
            padding: 0,

            openEffect : 'elastic',
            openSpeed  : 150,

            closeEffect : 'elastic',
            closeSpeed  : 150,

            closeClick : true,

            helpers : {
                overlay : null
            }
        });

        /*
         *  按钮的助手。禁用动画,隐藏关闭按钮,改变标题和内容类型
         */

        $('.fancybox-buttons').fancybox({
            openEffect  : 'none',
            closeEffect : 'none',

            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,

            helpers : {
                title : {
                    type : 'inside'
                },
                buttons	: {}
            },

            afterLoad : function() {
                this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
            }
        });


        /*
         *  缩略图助手。禁用动画,隐藏关闭按钮,如果点击箭头和滑下一个画廊
         */

        $('.fancybox-thumbs').fancybox({
            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,
            arrows    : false,
            nextClick : true,

            helpers : {
                thumbs : {
                    width  : 50,
                    height : 50
                }
            }
        });

        /*
         *  媒体辅助。集团项目,禁用动画,隐藏箭头,使媒体和按钮的帮手。
         */
        $('.fancybox-media')
                .attr('rel', 'media-gallery')
                .fancybox({
                    openEffect : 'none',
                    closeEffect : 'none',
                    prevEffect : 'none',
                    nextEffect : 'none',

                    arrows : false,
                    helpers : {
                        media : {},
                        buttons : {}
                    }
                });

        /*
         *  手动打开
         */

        $("#fancybox-manual-a").click(function() {
            $.fancybox.open('/plugin/fancybox2/demo/1_b.jpg');
        });

        $("#fancybox-manual-b").click(function() {
            $.fancybox.open({
                href : '/plugin/fancybox2/demo/iframe.html',
                type : 'iframe',
                padding : 5
            });
        });

        $("#fancybox-manual-c").click(function() {
            $.fancybox.open([
                {
                    href : '/plugin/fancybox2/demo/1_b.jpg',
                    title : 'My title'
                }, {
                    href : '/plugin/fancybox2/demo/2_b.jpg',
                    title : '2nd title'
                }, {
                    href : '/plugin/fancybox2/demo/3_b.jpg'
                }
            ], {
                helpers : {
                    thumbs : {
                        width: 75,
                        height: 50
                    }
                }
            });
        });
    });
</script>
</body>
</html>